<template>
    <!-- 内容-->
    <view class="main">
        <view class="content" v-for="(item, index) in stock" :key="index" @click="routerTodetail(item.symbol)">
            <view class="first-line">
                <view class="info">
                    <view class="name">{{ item.stockName }}</view>
                    <view class="code">{{ item.stockCode }}</view>
                </view>
                <image class="info-more" v-if="item.rate > 0 && item.rate != 0" src="../../../static/icon/increase.png"
                    mode="" />
                <image class="info-more" v-else-if="item.rate < 0 && item.rate != 0" src="../../../static/icon/decrease.png"
                    mode="" />
                <image class="info-more" v-else src="../../../static/icon/more-grey.png" mode="" />
            </view>
            <view class="second-line">
                <view
                    :class="['dot1', { red: item.rate > 0 && item.rate != 0 }, { green: item.rate < 0 && item.rate != 0 }]">
                    {{ item.regularMarketPrice }}</view>
                <view
                    :class="['dot2', { red: item.rate > 0 && item.rate != 0 }, { green: item.rate < 0 && item.rate != 0 }]">
                    {{ item.rate }}%</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, watch } from 'vue';
import { requestApi } from '@/api';
import { onUnload, onLoad } from '@dcloudio/uni-app';
import { useStockStore } from '@/stores'
import { getKey } from '@/utils/storage';


// 跳转
const routerTodetail = (code) => {
    uni.navigateTo({
        url: '/pages/market/market-detail?code=' + JSON.stringify(code)
    })
}
const emit = defineEmits(['getLenght'])
// 仓库
const store = useStockStore()
// 获取股票类型信息
const stock = ref([])
const option = {
    keyWords: '',
    region: 'TaiWan',
    interval: '1mo',
    stockType: ''
}
const unsubscribe = store.$onAction(({
    name,  //action 函数的名称
    store,  //store 实例，这里是 mainStore
    args, //action 函数参数数组
    after,  //钩子函数，在action函数执行完成返回或者resolves后执行
    onError // 钩子函数，在action函数报错或者rejects后执行
}) => {
    after(result => {
        if (name == 'addSortStock') {
            option.stockType = result
            // console.log(option.stockType);
            getStock()
        }
    })
})

async function getStock() {
    const { data, status } = await requestApi.getStock(option); // 异步获取股票数据
    if (status === 0) { // 如果获取成功
        const { list } = data; // 获取股票列表
        const stockList = []; // 定义一个股票数组
        for (let i = 0, len = list.length; i < len; i++) { // 遍历股票列表
            const { stockName, result } = list[i]; // 获取股票名称和结果
            const { regularMarketPrice, rate, symbol } = result[0].meta; // 获取股票的市价、涨跌率和代码
            const numrate = Number((100 * rate).toFixed(2)); // 计算涨跌率并保留两位小数
            const stockCode = symbol.match(/^[^\.]+/)[0]; // 获取股票代码的前缀
            stockList.push({ // 将股票的名称、市价、涨跌率、代码和代码前缀添加到股票数组中
                stockName,
                regularMarketPrice,
                rate: numrate,
                symbol,
                stockCode
            });
        }
        stock.value = stockList; // 将响应式变量的值更新为股票数组
    }
}
let timer = null
onUnload(() => {
    unsubscribe()
    clearInterval(timer)
})
onLoad(() => {
    timer =  setInterval(() => {
        getStock()
    }, 6000)
})
</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-dark;
}


.active {
    color: #fff;
}

.main {
    margin: 26rpx 40rpx 0rpx;
    display: grid;
    grid-column-gap: 20rpx;
    column-gap: 20rpx;
    grid-row-gap: 26rpx;
    row-gap: 26rpx;
    grid-template-columns: repeat(2, minmax(0, 1fr));


    .first-item,
    .content {
        background-color: #292A36;
        width: 324rpx;
        height: 197rpx;
        border-radius: 40rpx;

        .first-line {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 37rpx;
            padding-left: 24rpx;
            padding-right: 26rpx;

            .info {
                .name {
                    color: #fff;
                    font-size: 28rpx;
                }

                .code {
                    color: #7E8394;
                    font-size: 24rpx;
                }
            }


            .info-more {
                width: 48rpx;
                height: 48rpx;
            }
        }

        .second-line {
            display: flex;
            justify-content: space-between;
            padding-left: 24rpx;
            padding-right: 26rpx;
            margin-top: 25rpx;

            .dot1,
            .dot2 {
                color: #7E8394;
                height: 43rpx;
            }
        }

    }
}

.uni-popup {
    height: 20vh;
}

.red {
    color: #F04848 !important;
}

.green {
    color: #22A875 !important;
}
</style>